<script setup>
	import {getCurrentInstance, onBeforeUnmount, onMounted, ref} from "vue";
	import {getToken} from "@/utils/auth";
	import {addCouncil, getCouncilByKey, updCouncil} from "@/api/company/council";
	const { proxy } = getCurrentInstance();
	import emitter from "@/utils/mitt";
	
	const props = defineProps({
		rowId: {
			type: [Number, String],
			default: null
		}
	})
	
	const formData = ref({
		desc: null,
		engageWork: null,
		id: null,
		isTop: 0,
		isView: 1,
		name: null,
		photoFileIds: [],
		fileUrl: null,
		politicsStatus: null,
		sort: null,
		technicalTitles: null,
		achievement: null,
		work: null
	});
	const rules = ref({
		name: [{required: true, message: '请输入人员姓名', trigger: 'change'}],
		fileUrl: [{required: true, message: '请上传专家图片', trigger: 'change'}],
	});
	
	const getData = async () => {
		const res = await getCouncilByKey({id: props.rowId})
		if(res.code === 200) {
			formData.value = {
				...res.data,
				fileUrl: res.data.photoFiles?.length ? res.data.photoFiles[0].accessUrl : null,
				photoFileIds: res.data.photoFiles?.length ? [res.data.photoFiles[0].id] : []
			}	
		}
	}
	
	const submit = () => {
		proxy.$refs.elForm.validate(async valid => {
			if(valid) {
				const params = formData.value
				let res
				params.id !== null && params !== '' ? res = await updCouncil(params) : res = await addCouncil(params)
				try {
					if(res.code === 200) {
						proxy.$modal.msgSuccess('操作成功')
						cancel(true)
					}
					else {
						proxy.$modal.msgError(res.msg)
					}
				}
				catch(e) {
					console.log(e);
					proxy.$modal.msgError(JSON.stringify(e))
				}
			}
		})
	}
	
	const cancel = (ifSubmit = false) => {
		emitter.emit('closeEdit', ifSubmit)
	}
	
	onMounted(() => {
		if(props.rowId) {
			getData();
		}
	})

	// 图片上传
	const fileAction = import.meta.env.VITE_APP_BASE_API + "/expertCommittee/addPhotoImg";
	const clearFile = () => {
		formData.value.fileUrl = null;
		formData.value.photoFileIds = [];
		proxy.$refs["fileId"].clearFiles();
	};

	const photoBeforeUpload = (file) => {
		let isRightSize = file.size / 1024 / 1024 < 20;
		if (!isRightSize) {
			proxy.$modal.msgError("文件大小超过 20MB");
		}
		return isRightSize;
	};
	const handleRemove = (file, fileList) => {
		formData.value.fileUrl = null;
		formData.value.photoFileIds = [];
	};
	const uploadSuccess = (response, file, fileList) => {
		if (response.code === 200) {
			formData.value.photoFileIds = response.data.id ? [response.data.id] : [];
			formData.value.fileUrl = response.data.accessUrl;
		} else {
			formData.value.photoFileIds = [];
			formData.value.fileUrl = null;
		}
	};
	
</script>

<template>
	<div class="dialogContent">
		<el-form ref="elForm" :model="formData" :rules="rules" label-width="100px" :size="'default'">
			<el-form-item label="专家姓名" prop="name">
				<el-input v-model="formData.name" :style="{ width: '100%' }" clearable placeholder="请输入专家姓名"></el-input>
			</el-form-item>
			<el-form-item label="专家照片" prop="fileUrl">
				<el-upload
					ref="fileId"
					:accept="'.jpg,.jpeg,.png'"
					:action="fileAction"
					:before-upload="photoBeforeUpload"
					:headers="{
						Authorization: 'Bearer ' + getToken(),
					}"
					:limit="1"
					:list-type="'picture'"
					:on-remove="handleRemove"
					:on-success="uploadSuccess"
					:show-file-list="false">
					<el-button :disabled="formData.fileUrl" icon="Upload" :size="'small'" type="primary">
						上传照片
					</el-button>
					<el-button size="small" type="warning" @click.stop="clearFile">清空上传</el-button>
				</el-upload>
			</el-form-item>
			<el-form-item v-if="formData.fileUrl" prop="fileUrl">
				<el-image :preview-src-list="[formData.fileUrl]" :src="formData.fileUrl" style="width: 100px; height: 100px"> </el-image>
			</el-form-item>
			<el-form-item label="政治面貌" prop="politicsStatus">
				<el-input v-model="formData.politicsStatus" clearable placeholder="请输入政治面貌"></el-input>
			</el-form-item>
			<el-form-item label="工作单位" prop="work">
				<el-input v-model="formData.work" clearable placeholder="请输入工作单位"></el-input>
			</el-form-item>
			<el-form-item label="技术职称" prop="technicalTitles">
				<el-input v-model="formData.technicalTitles" clearable placeholder="请输入技术职称"></el-input>
			</el-form-item>
			<el-form-item label="从事工作" prop="engageWork">
				<el-input v-model="formData.engageWork" clearable placeholder="请输入从事工作"></el-input>
			</el-form-item>
			<el-form-item label="学术成果" prop="desc">
				<el-input
					v-model="formData.achievement"
					:autosize="{ minRows: 4, maxRows: 4 }"
					:style="{ width: '100%' }"
					placeholder="请输入学术成果"
					type="textarea"></el-input>
			</el-form-item>
			<el-form-item label="简介" prop="desc">
				<el-input
					v-model="formData.desc"
					:autosize="{ minRows: 4, maxRows: 4 }"
					:style="{ width: '100%' }"
					placeholder="请输入简介"
					type="textarea"></el-input>
			</el-form-item>
			<el-form-item label="是否置顶" prop="isTop">
				<el-switch v-model="formData.isTop" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否"></el-switch>
			</el-form-item>
			<el-form-item label="排序值" prop="sort">
				<el-input-number v-model="formData.sort" clearable placeholder="排序值" :step="1" :min="0"></el-input-number>&nbsp;&nbsp;排序值越小越靠前
			</el-form-item>
			<el-form-item label="是否显示" prop="isView">
				<el-switch v-model="formData.isView" :active-value="1" :inactive-value="0" active-text="显示" inactive-text="不显示"></el-switch>
			</el-form-item>
		</el-form>
		<div class="buttonList">
			<el-button class="button" type="primary" @click="submit">提交</el-button>
			<el-button class="button" @click="cancel">取消</el-button>
		</div>
	</div>
</template> 

<style lang="scss" scoped>
	.dialogContent {
		overflow: auto;
	}
	.buttonList {
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}
</style>
